<template>
  <view>
    <view class="input_style">
      <view class="uni_22px uni_color_000 mt100 mb38">账号密码登录 </view>
      <uni-easyinput
        class="input_height mb20"
        v-model="account"
        :clearable="true"
        :maxlength="11"
        placeholder="请输入手机号"
        prefix-icon="person"
      ></uni-easyinput>
      <view class="line-margin"></view>
      <uni-easyinput
        v-if="isReg"
        class="input_height mb20"
        v-model="code"
        :clearable="true"
        placeholder="请输入验证码"
        prefix-icon="person"
      >
        <template #right>
          <button
            class="code-button"
            size="mini"
            :disabled="isSendCode"
            @click="handleSendCode"
          >
            发送验证码
          </button>
        </template>
      </uni-easyinput>

      <view class="line-margin"></view>

      <uni-easyinput
        class="input_height mb20"
        v-model="password"
        type="password"
        :clearable="true"
        placeholder="请输入密码"
        prefix-icon="locked"
      ></uni-easyinput>

      <view class="reg-text" @click="handleReg">{{
        isReg ? "立即登录" : "立即注册"
      }}</view>

      <view class="uni_color_fff uni_15px mt20 button" @click="login">{{
        isReg ? "注册" : "登录"
      }}</view>
    </view>
  </view>
</template>

<script>
const app = getApp();

export default {
  data() {
    return {
      isReg: false,
      account: "",
      password: "",
      code: "",
      isSendCode: true,
    };
  },
  methods: {
    login() {
      if (!this.account || !this.password) {
        uni.showToast({
          title: "请输入账号密码",
          icon: "none",
        });
        return;
      }

      if (!this.isReg) {
        app
          .request(
            {
              account: this.account,
              password: this.password,
            },
            "/api/user/login"
          )
          .then((res) => {
            console.log(res);
            const { code, data, msg } = res;

            if (parseInt(code) === 1) {
              const { id, avatar, nickname, token } = data.userinfo;

              app.globalData.userInfo.id = id;
              app.globalData.userInfo.avatar = app.globalData.ftp + avatar;
              app.globalData.userInfo.nickname = nickname;
              app.globalData.token = token;
              uni.setStorageSync("token", token);
              uni.switchTab({
                url: "/pages/index/index",
                success(res) {
                  console.log(res);
                },
                fail(res) {
                  console.log(res);
                },
              });
            } else {
              uni.showToast({
                title: msg,
                icon: "none",
              });
            }
          });
      } else {
        // 注册
        app
          .request(
            {
              mobile: this.account,
              password: this.password,
              code: this.code,
            },
            "/api/user/register"
          )
          .then((res) => {
            const { code, data, msg } = res;

            if (parseInt(code) === 1) {
              uni.showToast({
                title: "注册成功",
                icon: "none",
              });
              this.isReg = false;
            } else {
              uni.showToast({
                title: msg,
                icon: "none",
              });
            }
          });
      }
    },
    handleReg() {
      this.isReg = !this.isReg;
      let str = "";

      if (this.isReg) {
        str = "注册";
      } else {
        str = "登录";
      }

      uni.setNavigationBarTitle({
        title: str,
      });
    },
    handleSendCode() {},
  },
};
</script>

<style lang="scss">
.input_style {
  width: 600rpx;
  max-width: 600rpx;
  margin-left: 75rpx;
  margin-right: 75rpx;
}

.code-button {
  width: 200rpx;
  margin-right: 12rpx;
}

.line-margin {
  margin: 20rpx 0;
}

.reg-text {
  margin: 36rpx 0 0 0;
  text-align: right;
  font-size: 28rpx;
  color: $uni-color-primary;
}

.mb38 {
  margin-bottom: 38rpx;
}

.mb20 {
  margin-bottom: 20rpx;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 4rpx;
  border-radius: 12rpx;
  height: 80rpx;
  background-color: $uni-color-primary;
}

.uni_10px {
  font-size: 20rpx;
}
.uni_11px {
  font-size: 22rpx;
}
.uni_12px {
  font-size: 24rpx;
}
.uni_13px {
  font-size: 26rpx;
}
.uni_14px {
  font-size: 28rpx;
}
.uni_15px {
  font-size: 30rpx;
}
.uni_16px {
  font-size: 32rpx;
}
.uni_17px {
  font-size: 34rpx;
}
.uni_18px {
  font-size: 36rpx;
}
.uni_20px {
  font-size: 40rpx;
}
.uni_22px {
  font-size: 44rpx;
}
.uni_24px {
  font-size: 48rpx;
}
.uni_25px {
  font-size: 50rpx;
}
.uni_28px {
  font-size: 56rpx;
}
.uni_30px {
  font-size: 60rpx;
}

/* 间距相关 */
.ml1 {
  margin-left: 2rpx;
}
.ml2 {
  margin-left: 4rpx;
}
.ml4 {
  margin-left: 8rpx;
}
.ml5 {
  margin-left: 10rpx;
}
.ml6 {
  margin-left: 12rpx;
}
.ml8 {
  margin-left: 16rpx;
}
.ml10 {
  margin-left: 20rpx;
}
.ml12 {
  margin-left: 24rpx;
}
.ml14 {
  margin-left: 28rpx;
}
.ml15 {
  margin-left: 30rpx;
}
.ml18 {
  margin-left: 36rpx;
}
.ml20 {
  margin-left: 40rpx;
}
.ml25 {
  margin-left: 50rpx;
}
.ml28 {
  margin-left: 56rpx;
}
.ml30 {
  margin-left: 60rpx;
}
.ml40 {
  margin-left: 80rpx;
}
.ml50 {
  margin-left: 100rpx;
}
.mr1 {
  margin-right: 2rpx;
}
.mr2 {
  margin-right: 4rpx;
}
.mr4 {
  margin-right: 8rpx;
}
.mr5 {
  margin-right: 10rpx;
}
.mr6 {
  margin-right: 12rpx;
}
.mr8 {
  margin-right: 16rpx;
}
.mr10 {
  margin-right: 20rpx;
}
.mr12 {
  margin-right: 24rpx;
}
.mr14 {
  margin-right: 28rpx;
}
.mr15 {
  margin-right: 30rpx;
}
.mr18 {
  margin-right: 36rpx;
}
.mr20 {
  margin-right: 40rpx;
}
.mr25 {
  margin-right: 50rpx;
}
.mr28 {
  margin-right: 56rpx;
}
.mr30 {
  margin-right: 60rpx;
}
.mr40 {
  margin-right: 80rpx;
}
.mr50 {
  margin-right: 100rpx;
}
.mt1 {
  margin-top: 2rpx;
}
.mt2 {
  margin-top: 4rpx;
}
.mt4 {
  margin-top: 8rpx;
}
.mt5 {
  margin-top: 10rpx;
}
.mt6 {
  margin-top: 12rpx;
}
.mt8 {
  margin-top: 16rpx;
}
.mt10 {
  margin-top: 20rpx;
}
.mt12 {
  margin-top: 24rpx;
}
.mt14 {
  margin-top: 28rpx;
}
.mt15 {
  margin-top: 30rpx;
}
.mt18 {
  margin-top: 36rpx;
}
.mt20 {
  margin-top: 40rpx;
}
.mt25 {
  margin-top: 50rpx;
}
.mt28 {
  margin-top: 56rpx;
}
.mt30 {
  margin-top: 60rpx;
}
.mt40 {
  margin-top: 80rpx;
}
.mt50 {
  margin-top: 100rpx;
}
.mt70 {
  margin-top: 140rpx;
}
.mt100 {
  margin-top: 200rpx;
}

.mb1 {
  margin-bottom: 2rpx;
}
.mb2 {
  margin-bottom: 4rpx;
}
.mb4 {
  margin-bottom: 8rpx;
}
.mb5 {
  margin-bottom: 10rpx;
}
.mb6 {
  margin-bottom: 12rpx;
}
.mb8 {
  margin-bottom: 16rpx;
}
.mb10 {
  margin-bottom: 20rpx;
}
.mb12 {
  margin-bottom: 24rpx;
}
.mb14 {
  margin-bottom: 28rpx;
}
.mb15 {
  margin-bottom: 30rpx;
}
.mb18 {
  margin-bottom: 36rpx;
}
.mb20 {
  margin-bottom: 40rpx;
}
.mb25 {
  margin-bottom: 50rpx;
}
.mb28 {
  margin-bottom: 56rpx;
}
.mb30 {
  margin-bottom: 60rpx;
}
.mb40 {
  margin-bottom: 80rpx;
}
.mb50 {
  margin-bottom: 100rpx;
}
.uni_ellipsis {
  /* 	overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
     */
  /* #ifndef APP-NVUE */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* #endif */
}

.uni_color_000 {
  color: #000000;
}
.uni_color_fff {
  color: #ffffff;
}
.uni_color_green {
  color: #3cb475;
}
.uni_color_red {
  color: #f41c44;
}
</style>
